<template>
  <div class="">
    <div class="bg-container">
      <div
        class="bg-img "
        :style="{
          background: `url(${bgImg[0].picture})  center center`,
          bacgroundSize: 'cover',
        }"
      >
        <!-- <el-carousel indicator-position="inside" height="500px">
          <el-carousel-item v-for="item in bgImg" :key="item.id">
            <a :href="item.redirectUrl ? item.redirectUrl : ''">
              <el-image :src="item.picture" fit="cover"> </el-image>
            </a>
          </el-carousel-item>
        </el-carousel> -->
      </div>
    </div>
    <div class="tab-box">
      <div class="self-container self-tab">
        <div
          v-for="item in navList"
          :key="item.id"
          :class="['tab-item', activeTabClass(item)]"
          @click="handleClick(item)"
        >
          {{ item.name }}
          <div class="bottom-line"></div>
        </div>
      </div>
    </div>
    <div class="self-container">
      <div :class="[activeName === '首页' ? 'home' : 'hidden']">
        <div class="main">
          <div class="video-box mb-8">
            <video
              :src="videoSrc"
              controls="controls"
              style="height: 100%;width: 100%"
            ></video>
          </div>

          <div class="module-box mb-8">
            <div class="nav-line">
              <h4 class="flex-grow">明星企业</h4>
              <span
                class="text-gray-400 cursor-pointer"
                @click="toNav('明星企业')"
              >
                查看更多
              </span>
            </div>
            <div
              v-for="item in companyInfoList"
              :key="item.id"
              class="info-item"
              @click="toCompanyDetail(item)"
            >
              <div
                class="left"
                :style="{
                  background: `url(${item.mainImg})`,
                  'background-size': 'contain',
                  'background-position': 'center center',
                  'background-repeat': 'no-repeat',
                }"
              ></div>
              <div class="right">
                <div>
                  <h6 class="info-title">
                    {{ item.title }}
                  </h6>
                  <p class="text-gray-400 py-2">
                    {{ item.dynamicInfo }}
                  </p>
                </div>

                <div class="text-gray-400">
                  <i class="el-icon-time"> </i>
                  <span>
                    {{ item.releaseTime }}
                  </span>
                </div>
              </div>
            </div>
            <div
              v-if="companyInfoList.length <= 0"
              class="pb-8 m-auto text-xl text-center text-gray-500"
            >
              暂无数据
            </div>
          </div>

          <div class="module-box">
            <div class="nav-line">
              <h4 class="flex-grow">区域政策</h4>
              <span
                class="text-gray-400 cursor-pointer"
                @click="toNav('区域政策')"
              >
                查看更多
              </span>
            </div>
            <div
              v-for="item in policyInfoList"
              :key="item.id"
              class="info-item"
              @click="toPolicyDetail(item)"
            >
              <div
                class="left"
                :style="{
                  background: `url(${item.mainImg}) `,
                  'background-size': 'contain',
                  'background-position': 'center center',
                  'background-repeat': 'no-repeat',
                }"
              ></div>
              <div class="right">
                <div>
                  <h6 class="info-title">
                    {{ item.title }}
                  </h6>
                  <p class="text-gray-400 py-2">
                    {{ item.dynamicInfo }}
                  </p>
                </div>

                <div class="text-gray-400">
                  <i class="el-icon-time"> </i>
                  <span>
                    {{ item.releaseTime }}
                  </span>
                </div>
              </div>
            </div>
            <div
              v-if="policyInfoList.length <= 0"
              class="pb-8 m-auto text-xl text-center text-gray-500"
            >
              暂无数据
            </div>
          </div>
        </div>
        <div class="asider">
          <div class="box introduce mb-8">
            <div class="flex">
              <h4 class="flex-grow">明星企业</h4>
              <span
                class="text-gray-400 cursor-pointer"
                @click="activeName = '明星企业'"
              >
                查看更多
              </span>
            </div>
            <div class="content ">
              {{ introduceBrief }}
            </div>
          </div>
          <AttractCard />
        </div>
      </div>

      <areaIntroduce
        :areaIntroduce="areaIntroduce"
        :className="activeName === '区域介绍' ? 'home' : 'hidden'"
        @toAreaIntroduce="toNav('区域政策')"
        :policyList="policyInfoList"
      />

      <companyList
        :className="activeName === '明星企业' ? 'home' : 'hidden'"
        :areaIntroduce="areaIntroduce"
        @toAreaIntroduce="toNav('区域介绍')"
      />
      <policyList
        :className="activeName === '区域政策' ? 'home' : 'hidden'"
        :areaIntroduce="areaIntroduce"
        @toAreaIntroduce="toNav('区域介绍')"
      />
    </div>
  </div>
</template>

<script>
import {
  getCityManager,
  getStarCompanyList,
  getPolicyList,
} from '@/api/windowCity/getCityInfo'

import AttractCard from './AttractCard.vue'
import companyList from './starCompany/companyList.vue'
import policyList from './policy/policyList.vue'
import areaIntroduce from './areaIntroduce/areaIntroduce.vue'

export default {
  components: {
    AttractCard,
    companyList,
    policyList,
    areaIntroduce,
  },
  data() {
    return {
      navList: [
        { name: '首页', id: 0 },
        { name: '区域介绍', id: 1 },
        { name: '明星企业', id: 2 },
        { name: '区域政策', id: 3 },
      ],
      videoSrc: '',
      areaIntroduce: { remark: '' },
      attract: {
        remark: '',
        title: '',
        file: '',
      },
      bgImg: [
        {
          picture: require('@/assets/page-head/policy.png'),
          address: '九江市',
        },
      ],

      infoTypeList: [
        {
          id: 0,
          name: '宣传片',
          thisName: 'videoSrc',
        },
        {
          id: 1,
          name: '区域介绍',
          thisName: 'areaIntroduce',
        },
        {
          id: 2,
          name: '产业园招商',
          thisName: 'attract',
        },
      ],
      companyInfoList: [],
      policyInfoList: [],
      serviceList: [
        {
          id: 0,
          mainImg:
            '',
          title: '专注于疫苗邻域，华诺泰生物或天使轮融资',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '世界在发生剧烈的变化，技术也在发生快速的变化，所有的变化都会深刻影响到我们每一家企业，所以青年企业家朋友们，明天我们的企业能走到哪一步，关键在于眼光，在于对未来的判断。如果能够把......',
          typeId: 1,
        },
        {
          id: 1,
          mainImg:
            '',
          title:
            '4月分江西经济加快恢复；路透：纳斯达克将收紧上市规则纳斯达克将收紧上市规则式风格士大夫嘎斯豆腐干噶士大夫嘎斯豆腐干士大夫发给敢死队风格士大夫',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...',
          typeId: 1,
        },
        {
          id: 2,
          mainImg:
            '',
          title: '标题3',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...',
          typeId: 1,
        },
      ],

      introduceBrief: '',
      activeName: '首页',
    }
  },
  watch: {
    '$route.params': {
      handler() {
        this.getCityInfo()
        this.getStarComList()
        this.getPolList()
      },
    },
    '$route.query': {
      handler() {
        this.initActiveName()
      },
      deep: true,
    },
  },
  computed: {
    activeTabClass() {
      return (item) => {
        if (item.name === this.activeName) {
          return 'active-tab-item'
        }
        return ''
      }
    },
  },
  created() {
    this.getCityInfo()
    this.getStarComList()
    this.getPolList()
    this.initActiveName()
  },
  methods: {
    initActiveName() {
      let activeName = this.$route.query.activeName
      if (activeName) {
        this.activeName = activeName
      }
    },
    getCityInfo() {
      let id = this.$route.params.id
      getCityManager({ cityId: id }).then((res) => {
        if (res.code === 200) {
          let list = res.rows
          this.manageInfo(list)
        }
      })
    },
    manageInfo(resList) {
      for (let index = 0; index < resList.length; index++) {
        const ele = resList[index]
        if (ele.type === 0) {
          this.videoSrc = ele.file
        }
        if (ele.type === 1) {
          this.areaIntroduce = ele
        }
        if (ele.type === 2) {
          this.attract = ele
        }
      }
    },

    getStarComList() {
      let id = this.$route.params.id

      let query = {
        pageSize: 5,
        pageNum: 1,
        cityId: id,
      }
      getStarCompanyList(query).then((res) => {
        if (res.code === 200) {
          this.companyInfoList = res.rows
        }
      })
    },

    getPolList() {
      let id = this.$route.params.id

      let query = {
        pageSize: 5,
        pageNum: 1,
        cityId: id,
      }
      getPolicyList(query).then((res) => {
        if (res.code === 200) {
          this.policyInfoList = res.rows
        }
      })
    },

    handleClick(item) {
      this.toNav(item.name)
      //
    },
    toPolicyDetail(item) {
      let locationId = this.$route.params.id
      let poicyDetailId = parseInt(item.id)

      this.$router.push({
        path: `/locationCity/${locationId}/locationPolicyDetail/${poicyDetailId}`,
      })
    },
    toCompanyDetail(item) {
      let locationId = this.$route.params.id
      let companyDetailId = parseInt(item.id)

      this.$router.push({
        path: `/locationCity/${locationId}/locationCompanyDetail/${companyDetailId}`,
      })
    },
    toNav(name) {
      if (name === this.activeName) {
        return
      }
      // window.scrollTo({ top: 564, behavior: 'smooth' })
      this.$router.push({
        path: '/locationCity/' + this.$route.params.id,
        query: { activeName: name },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.bg-container {
  width: 100%;
  height: 500px;
  position: relative;
  .bg-img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 500px;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .identity-list {
    height: 100%;
    padding-right: 360px;
    display: flex;
    flex-flow: nowrap column;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    .item {
      z-index: 1000;
      width: 308px;
      height: 122px;
      padding: 10px;
      margin-bottom: 17px;
      border-radius: 5px;
      cursor: pointer;
      background: #ffffff6c;
      // backdrop-filter: blur(6px);
      transition: 300ms ease-in all;
      .title {
        height: 2.5rem;
        line-height: 2.5rem;
        min-width: 8rem;
        text-align: center;
        font-size: 1.2rem;
        color: #fff;
      }

      .el-divider--horizontal {
        margin: 20px 0;
      }

      .el-divider__text {
        position: absolute;
        background: #ffffff6c;
        color: #fff;
      }

      .sub-item {
        height: 2rem;
        line-height: 2rem;
        min-width: 33.3%;
        text-align: center;
        font-size: 12px;
        a {
          color: #fff;
        }
      }
    }
  }
}

.tab-box {
  background: #1678ff;
  .self-tab {
    @apply flex text-white py-4;

    .tab-item {
      padding: 0 2rem;
      padding-bottom: 1rem;
      @apply relative text-xl text-center text-blue-200 cursor-pointer tracking-wider hover:font-bold hover:text-white;

      .bottom-line {
        position: absolute;
        left: 30%;
        bottom: 0;
        width: 40%;
        height: 0.2rem;
        background-color: #1678ff;
      }
    }
    .active-tab-item {
      font-weight: bold;
      @apply text-white;

      .bottom-line {
        background-color: #fff;
      }
    }
  }
}

.home {
  @apply flex py-8;
}

.main {
  @apply flex-grow  pr-4;

  .video-box {
    height: 448px;
  }

  .module-box {
    .nav-line {
      @apply flex p-4;
    }
    .info-item {
      width: 100%;
      height: 216px;
      padding: 16px 0;
      cursor: pointer;
      @apply flex mb-2 rounded-md border-b transition-all duration-300  transform;
      &:hover {
        // box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
        @apply shadow-md;
      }

      .left {
        height: 100%;
        min-width: 271px;
      }
      .right {
        padding: 16px;
        @apply flex flex-col justify-between;

        .info-title {
          width: 100%;
          height: 3rem;
          line-height: 1.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }

  // 区域政策

  .title-line {
  }
}
.line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.asider {
  min-width: 430px;
  width: 430px;
  min-height: 200px;
  // background-color: aqua;
  .box {
    border-top: solid 2px #f08519;
    @apply px-4 py-8 border-2  overflow-hidden rounded-md;
  }
  .introduce {
    height: 448px;

    .content {
      height: 360px;
      line-height: 1.8rem;
      @apply w-full text-gray-500 py-4  overflow-ellipsis overflow-hidden;
    }
  }
}
</style>
